<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" name="file" id="ifle" onchange="upload.call(this)">
    <script src="tiff.js"></script>
    <script>
        function upload() {
            console.log(this.files);
            var fileReader = new FileReader();
            var file = this.files[0];
            fileReader.readAsArrayBuffer(this.files[0])
            fileReader.onload = function () {
                try {
                    var image = new Tiff({ buffer: this.result });
                    var canvas = image.toCanvas();
                    console.log(canvas.toDataURL('image/jpg'));
                    document.body.append(canvas);
                } catch (error) {
                    fileReader.readAsDataURL(file);
                    fileReader.onload=function(){
                        var image = new Image();
                        image.src = this.result;
                        document.body.append(image);
                    }
                }

            }
            fileReader.onerror = function (e) {
                console.log(e);
            }
        }
    </script>
</body>

</html>